<template>
    <StudentInfoChange @onChangeStudent="onChangeStudent" :toRenderStudentInfo="toRenderStudentInfo"></StudentInfoChange>
    <StudentTable :studentsData="studentsData" :studentsDataHeader="studentsDataHeader"
        @onDeleteStudent="onDeleteStudent" @getUpdateStudentInfo="getUpdateStudentInfo"></StudentTable>
</template>

<script setup>
import { ref } from 'vue';
import StudentTable from './StudentTable.vue';
import StudentInfoChange from './StudentInfoChange.vue';

const toRenderStudentInfo = ref({});

//学生信息
const studentsData = ref([
    { id: 1, name: '张奕', age: 20 },
    { id: 2, name: '王维', age: 25 },
    { id: 3, name: '李白', age: 33 },
])
//表格表头
const studentsDataHeader = ref([
    { name: '编号', value: 'id' },
    { name: '姓名', value: 'name' },
    { name: '年龄', value: 'age' },
    { name: '操作', value: 'operate' },
])

//删除
function onDeleteStudent(itemId) {
    studentsData.value = studentsData.value.filter(item => {
        return item.id != itemId
    })
}
//新增/修改
function onChangeStudent(item) {
    if (item.id) {
        studentsData.value = [...studentsData.value.map(temp => {
            if (item.id == temp.id) {
                return {...item}
            }
            return temp
        })]
    } else {
        studentsData.value.push({ id: Date.now(),...item});
    }

}




//获取变更数据
function getUpdateStudentInfo(item) {
    toRenderStudentInfo.value = { ...item }
}
</script>

<style scoped></style>